<!-- TODO 这个页面我的太长了，抽离一下 -->
<template>
  <div class="jineng-fenzhi">
    <Breadcrumb :breadStr="breadStr"></Breadcrumb>
    <!-- 搜索、筛选所在行 -->
    <el-card
      class="search-line"
      shadow="hover"
      :body-style="{ padding: '20px' }"
    >
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input
            placeholder="(未实现)请输入搜索内容，支持部门、岗位、姓名模糊查询"
            v-model="queryInfo.query"
            clearable
            @clear="getFenzhiList()"
            @keyup.enter.native="getFenzhiList()"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getFenzhiList()"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="14">
          <!-- 新增员工技能 -->
          <el-dialog
            class="addjineng"
            title="新增员工技能"
            :visible.sync="AddYgSkillVisible"
            width="50%"
          >
            <el-select
              v-model="ygId"
              placeholder="选择员工"
              @change="filterSkill(ygId)"
            >
              <el-option
                v-for="(item,index) in yglist"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="skillnameValue"
              placeholder="选择技能"
            >
              <el-option
                v-for="(item,index) in skillname"
                :key="index"
                :label="item.label"
                :value="item.id"
                :disabled="selectSkillDisable(item.id)"
              >
              </el-option>
            </el-select>
            <div class="desc-text">
              <span>说明: 新增的技能项熟练度默认为不熟悉。后续请到技能详情中提升熟练度。</span>
            </div>
            <span slot="footer">
              <el-button
                type="primary"
                @click="addSkill(ygId,skillnameValue)"
                :disabled="addYgBtnDisable(ygId,skillnameValue)"
              >确认</el-button>
            </span>
          </el-dialog>
          <div
            class="choose-btn"
            v-if="!chooseVisible"
          >
            <el-button
              type="primary"
              @click="showAddDialog()"
            >新增</el-button>
            <el-button
              type="primary"
              @click="showChoose()"
            >筛选</el-button>
          </div>
          <div
            class="choose-wrapper"
            v-else
          >
            <span>请选择</span>
            <el-select
              v-model="skillnameValue"
              placeholder="技能项"
              @change="changeChoose()"
            >
              <el-option
                v-for="(item,index) in skillname"
                :key="index"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="compareValue"
              placeholder="高于/低于"
              @change="changeChoose()"
            >
              <el-option
                v-for="(item,index) in compare"
                :key="index"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="slnameValue"
              placeholder="熟练度"
              @change="changeChoose()"
            >
              <el-option
                v-for="(item,index) in slname"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="selectDisable(index)"
              >
              </el-option>
            </el-select>
            <el-button
              type="text"
              size="mini"
              @click="cancelChoose()"
            >取消筛选</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 员工技能详情的表格 -->
    <el-card
      shadow="hover"
      :body-style="{ padding: '20px' }"
    >
      <el-table
        :data="fenzhiList"
        :default-sort="{prop: 'total', order: 'descending'}"
        border
        stripe
      >
        <el-table-column
          prop="name"
          label="姓名"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="bumen"
          label="部门"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="gangwei"
          label="岗位"
          sortable
        >
        </el-table-column>
        <el-table-column label="技能详情">
          <template slot-scope="scope">
            <el-button
              type="success"
              size="mini"
              @click="showSkillDetail(scope.row)"
            >技能详情</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="total"
          label="总技能分(分)"
          sortable
        >
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 点击技能详情后的对话框 -->
    <el-dialog
      :visible.sync="skillDetailVisible"
      width="50%"
    >
      <!-- 展示单员工的所有技能的表格 -->
      <el-table
        :data="skillDetail.sklist"
        border
        stripe
      >
        <el-table-column
          prop="skillname"
          label="技能名称"
        >
        </el-table-column>
        <el-table-column
          prop="slname"
          label="技能熟练度"
        >
        </el-table-column>
        <el-table-column
          prop="fenzhi"
          label="熟练度分值"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="showUpdateFenzhi(scope.row)"
            >修改熟练度</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹出框，修改熟练度的 -->
      <el-dialog
        :visible.sync="updateFenzhiVisible"
        width="30%"
        @close="slnameValue = ''"
        append-to-body
      >
        <p>当前熟练度：{{currentSlname}}</p>
        修改为
        <el-select
          v-model="slnameValue"
          placeholder="熟练度"
        >
          <el-option
            v-for="(item,index) in slname"
            :key="index"
            :disabled="item.label===currentSlname"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span slot="footer">
          <el-button
            :disabled="typeof slnameValue !== 'number'"
            type="primary"
            @click="updateFenzhi(slnameValue)"
          >确认修改</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import Breadcrumb from '../common/Breadcrumb'
import { homeMixin } from '../../utils/mixin'
export default {
  mixins: [homeMixin],
  components: {
    Breadcrumb
  },
  data () {
    return {
      fenzhiList: [],
      queryInfo: {
        query: ''
      },
      // 筛选框是否显示
      chooseVisible: false,
      // 选择框的三个数组
      skillname: [],
      skillnameValue: '',
      compare: [{ id: 1, label: '大于' }, { id: 0, label: '小于' }],
      compareValue: '',
      slname: [],
      // 未选择时为空字符串、选择后为0,1,2 等 >=0的数值
      slnameValue: '',
      skillDetailVisible: false,
      // 技能详情，用于点击技能详情按钮后的dialog
      skillDetail: [],
      updateFenzhiVisible: false,
      // 修改熟练度按钮点击后，获取到的技能id
      skillid: '',
      // 当前熟练度
      currentSlname: '',
      AddYgSkillVisible: false,
      // 包含所有员工id和员工姓名,用于选择框
      yglist: [],
      // 选择框选中的员工id
      ygId: '',
      // 新增员工技能，选择完员工后，该员工的技能(id)
      sklist: []
    }
  },
  created () {
    this.getBread()
    this.getFenzhiList()
  },
  computed: {
    selectDisable () {
      // 参考链接 https://segmentfault.com/q/1010000009648670
      return function (index) {
        return ((index === this.slname.length - 1) && this.compareValue === 1) ||
          ((index === 0) && this.compareValue === 0)
      }
    },
    addYgBtnDisable () {
      return function (ygId, skillnameValue) {
        return !(typeof ygId === 'number' && typeof skillnameValue === 'number')
      }
    },
    selectSkillDisable () {
      return function (ygid) {
        return this.sklist.indexOf(ygid) !== -1
      }
    }
  },
  methods: {
    async getFenzhiList (queryObj) {
      // TODO 加个校验，本次的query如果和上次的一样，就不发送请求
      queryObj = { ...queryObj, query: this.queryInfo.query.trim() }
      console.log(queryObj)
      // 查询参数完整示例
      // {skid: this.skillnameValue,than: this.compareValue,
      //    slid: this.slnameValue,query: this.queryInfo.query}
      const { data } = await this.$http.get('/ygskill/getlist', { params: queryObj })
      if (data.error_code === 0) {
        this.fenzhiList = data.data
      }
    },
    async showChoose () {
      this.chooseVisible = true
      await this.getSkillname()
      await this.getSlname()
    },
    cancelChoose () {
      this.chooseVisible = false
      this.getFenzhiList()
    },
    async showAddDialog () {
      await this.getYgNameList()
      await this.getSkillname()
      this.ygId = ''
      this.skillnameValue = ''
      this.AddYgSkillVisible = true
    },
    async getSkillname () {
      const { data } = await this.$http.get('/skill/getlist')
      if (data.error_code === 0) {
        this.skillname = []
        data.data.map(item => {
          this.skillname.push({ id: item.id, label: item.name })
        })
      }
    },
    // 获取熟练度数据，用于选择框
    async getSlname () {
      this.slname = []
      const { data } = await this.$http.get('/shulian/getlist')
      if (data.error_code === 0) {
        data.data.map(item => {
          this.slname.push({ label: item.shulian, value: item.fenzhi })
        })
      }
    },
    async changeChoose () {
      // TODO 选中技能项目项目时候，筛选出含有当前技能的员工(后端接口暂未实现)
      // if (this.skillnameValue) {
      //   await this.getFenzhiList({ skid: this.skillnameValue })
      // }
      if (this.skillnameValue && ((typeof this.compareValue) === 'number') &&
        (typeof (this.slnameValue) === 'number')) {
        await this.getFenzhiList({
          skid: this.skillnameValue,
          than: this.compareValue,
          slid: this.slnameValue
        })
      }
    },
    // 点击技能详情后，显示单用户的所有技能，row是单人的信息
    showSkillDetail (row) {
      this.skillDetailVisible = true
      this.skillDetail = row
    },
    // 显示更新分值的对话框,获取当前更新的技能id
    async showUpdateFenzhi (row) {
      this.updateFenzhiVisible = true
      await this.getSlname()
      this.skillid = row.skillid
      this.currentSlname = row.slname
    },
    async updateFenzhi (fenzhi) {
      const slid = await this.getShulianId(fenzhi)
      const { data } = await this.$http.post('/ygskill/update', {
        ygid: this.skillDetail.ygid,
        skid: this.skillid,
        slid
      })
      if (data.error_code === 0) {
        this.$message.success('修改成功!')
        // TODO 此处可以优化一下，ygid这个人的数据获取了两次
        await this.getOneById(this.skillDetail.ygid)
        await this.getFenzhiList()
      }
      this.updateFenzhiVisible = false
    },
    // 获取熟练度与分值的对应关系，传入熟练度分值，返回熟练度id(默认值为'')
    async getShulianId (fenzhi) {
      const { data } = await this.$http.get('/shulian/getlist')
      if (data.error_code !== 0) {
        return
      }
      let slId = ''
      data.data.filter(item => {
        if (item.fenzhi === fenzhi) {
          slId = item.id
        }
      })
      return slId
    },
    // 获取单人的技能数据
    async getOneById (ygid) {
      const { data } = await this.$http.get('/ygskill/getone', {
        params: { ygid }
      })
      if (data.error_code === 0) {
        this.skillDetail = data.data
      }
    },
    // 新增员工技能
    async addSkill (ygid, skid) {
      const { data } = await this.$http.post('/ygskill/add', { ygid, skid })
      if (data.error_code !== 0) {
        this.$message.error('添加失败，该员工已有该技能')
        return
      }
      this.$message.success(data.msg)
      this.AddYgSkillVisible = false
      await this.getFenzhiList()
    },
    // 获取员工姓名列表,用于新增员工时的选择框
    async getYgNameList () {
      const { data } = await this.$http.get('/yg/getnamelist')
      if (data.error_code === 0) {
        this.yglist = data.data
      }
    },
    // 新增员工技能，选择完员工姓名后，筛选该员工已有的技能，不允许下一个选择框选中
    async filterSkill (ygid) {
      await this.getOneById(ygid)
      if (!this.skillDetail) {
        return
      }
      const sklist = []
      // eslint 不支持(?.)可选链操作符，这种语法屏蔽下一行的检测
      // eslint-disable-next-line no-unused-expressions
      this.skillDetail.sklist?.map(item => {
        sklist.push(item.skillid)
      })
      this.sklist = sklist
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin";
.jineng-fenzhi {
  min-width: 1000px;
  .search-line {
    margin-bottom: $elcardbottom;
    //新增
    .addjineng {
      /deep/ .el-select {
        margin-right: 10px;
      }
      .desc-text {
        margin-top: 10px;
      }
    }
    //筛选
    .choose-wrapper {
      line-height: 40px;
      /deep/ .el-select {
        width: 20%;
        margin: 0 5px;
      }
    }
  }
}
</style>
